<script setup lang="ts">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, ref, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { DepartmentItem } from '@/api/department/types'
import { getTreeDepartmentsApi } from '@/api/department'
import { useI18n } from '@/hooks/web/useI18n'
import { getStationsApi } from '@/api/role'
const { required } = useValidator()
const { t } = useI18n()
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<DepartmentItem>>,
    default: () => null
  }
})
interface op {
  label: string
  value: string
}

const stations = ref<op[]>([])
// const getStations = async () => {
//   const res = await getStationsApi({ pageFlag: false })
//   const list = res.data?.pageModels || []
//   let arr: op[] = []
//   console.log('getStations-----', list)
//   list.map((item) => {
//     arr.push({
//       label: item.stationName,
//       value: item.stationKey
//     })
//   })
//   stations.value = arr
// }

const setItemValues = (item: DepartmentItem) => {
  item.departmentName = item.depNo + '-' + item.depName
  if (props.currentRow?.guid == item.guid) {
    item.disabled = true
  }
  if (item.children && item.children.length > 0) {
    item.children.map((item) => {
      setItemValues(item)
    })
  }
}

const handleDepartments = async () => {
  const res = await getTreeDepartmentsApi({ pageFlag: false })
  const list = res.data || []
  console.log('getStations-----', list)
  list.map((item) => {
    setItemValues(item)
  })
  return list
}
const formSchema = reactive<FormSchema[]>([
  {
    field: 'depParentGuid',
    label: '上级部门',
    component: 'TreeSelect',
    componentProps: {
      nodeKey: 'guid',
      props: {
        label: 'departmentName',
        value: 'guid',
        children: 'children'
      },
      highlightCurrent: true,
      expandOnClickNode: false,
      checkStrictly: true,
      checkOnClickNode: true,
      clearable: true,
      filterable: true
    },
    optionApi: async () => {
      // const res = await getTreeDepartmentsApi({ pageFlag: false })
      // return res.data || [] //.list
      return handleDepartments()
    }
  },
  {
    field: 'depNo',
    label: t('userDemo.depNo'),
    component: 'Input'
  },
  {
    field: 'depName',
    label: t('userDemo.departmentName'),
    component: 'Input'
  },

  {
    field: 'depLevel',
    label: '部门级别',
    component: 'Input',
    hidden: true
  },
  {
    field: 'guid',
    label: 'guid',
    component: 'Input',
    hidden: true,
    value: '  '
  },
  {
    field: 'stationGuid',
    label: t('site.stationName'),
    component: 'Select',
    componentProps: {
      clearable: true,
      props: {
        label: 'stationName',
        value: 'stationKey'
      }
    },
    optionApi: async () => {
      const res = await getStationsApi({ pageFlag: false })

      return res.data.pageModels || []
    }
  },
  {
    field: 'saveFileDay',
    label: '保存文件天数',
    component: 'InputNumber',
    componentProps: {
      min: 0,
      controls: false,
      placeholder: '请输入保存文件天数(0表示不限)'
    }
  },
  // {
  //   field: 'saveFileDay',
  //   label: '保存视频文件天数',
  //   component: 'InputNumber',
  //   componentProps: {
  //     min: 0,
  //     controls: false,
  //     placeholder: '请输入保存视频文件天数(0表示不限)'
  //   }
  // },
  // {
  //   field: 'saveFileDay',
  //   label: '保存音频文件天数',
  //   component: 'InputNumber',
  //   componentProps: {
  //     min: 0,
  //     controls: false,
  //     placeholder: '请输入保存音频文件天数(0表示不限)'
  //   }
  // },
  {
    field: 'remark',
    label: t('menu.Remark'),
    component: 'Input'
  }
])

const rules = reactive({
  depNo: [required()],
  depName: [required()]
  // stationGuid: [required()]
})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    return formData
  }
}

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template>
<style scoped>
:deep(.el-input__inner) {
  text-align: start !important;
}
</style>
